<template>
  <el-dialog
    :close-on-click-modal="false"
    width="75%"
    :title="title"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form status-icon :rules="rules" :model="datas" ref="editForm">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item
            prop="name"
            label="考核点"
            :label-width="baseStyle.width"
          >
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 2}"
              v-model="datas.name"
              autocomplete="off"
            ></el-input> -->
            <quill-editor
              class="editor-quill"
              v-model="datas.name"
              :options="editorOption"
              ref="myQuillEditor"
            ></quill-editor>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="class_id"
            label="分类列表"
            :label-width="baseStyle.width"
          >
            <el-select
              v-model="datas.class_id"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="content_id"
            label="考核项列表"
            :label-width="baseStyle.width"
          >
            <el-select
              v-model="datas.content_id"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in contentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item prop="isImportant" label="是否项目考核点" :label-width="baseStyle.width">
            <el-select v-model="datas.isImportant" placeholder="请选择" style="width: 100%;">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="score" label="总分" :label-width="baseStyle.width">
            <el-input-number
              v-model="datas.score"
              :precision="1"
              :step="0.1"
              :min="0"
              :max="100"
              style="width:100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="weight" label="权重" :label-width="baseStyle.width">
            <el-input-number
              v-model="datas.weight"
              :precision="0"
              :step="1"
              :min="1"
              :max="100"
              style="width:100%"
            ></el-input-number>
          </el-form-item>
        </el-col>-->
        <!-- <el-col :span="12">
          <el-form-item prop="orgname" label="所属部门" :label-width="baseStyle.width">
            <el-select v-model="datas.orgname" placeholder="请选择" style="width: 100%;">
              <el-option :value="choseDepart.label" style="height: auto;padding:0">
                <el-tree
                  empty-text="暂无数据"
                  ref="asyncTree"
                  check-strictly
                  highlight-current
                  :expand-on-click-node="false"
                  node-key="id"
                  :props="treeDefaultProps.defaultProps"
                  :load="loadNode"
                  lazy
                  @node-click="handleNodeClick"
                >
                  <div class="custom-tree-node" slot-scope="{ node }">
                    <span style="font-size:14px;font-weight: normal;">{{ node.label }}</span>
                  </div>
                </el-tree>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item prop="sort" label="排序" :label-width="baseStyle.width">
            <el-input-number
              v-model="datas.sort"
              :precision="0"
              :step="1"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="status"
            label="是否禁用"
            :label-width="baseStyle.width"
          >
            <el-radio-group v-model="datas.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save()"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import orgAPI from "@apis/organize";
const toolbarOptions = [
  ["bold", "italic"], // 加粗 斜体 下划线 删除线
];
export default {
  name: "editForm",
  props: {
    visible: Boolean,
    baseStyle: Object,
    setClassData: Object,
    title: String,
    datas: {
      type: Object,
    },
    saveForm: Function,
  },
  data() {
    const rules = this.getRules();
    return {
      loading: false,
      rules,
      choseDepart: null,
      classList: [],
      contentList: [],

      treeDefaultProps: {
        defaultProps: {
          children: "children",
          label: "label",
        },
        defaultExpanded: [1],
      },
      editorOption: {
        placeholder: "请输入...",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic"], // 加粗 斜体 下划线 删除线
            ],
          },
        },
        theme: "snow",
      },
    };
  },
  computed: {},
  created() {
    // this.choseDepart =
    //   this.title == "编辑考核点"
    //     ? { id: this.datas.orgid, label: this.datas.orgname }
    //     : { id: "", label: "" };

    this.classList = [...this.setClassData.classData];
    this.contentList = [...this.setClassData.contentData];
  },
  methods: {
    // //树状图数据懒加载函数
    // async loadNode(node, resolve) {
    //   if (node.level == 0) {
    //     await this.getOrgList(0);
    //     return resolve(this.data);
    //   } else {
    //     await this.getOrgList(node.data.id);
    //     return resolve(this.data);
    //   }
    // },
    // //获取树状图数据
    // async getOrgList(val = 0) {
    //   this.data = [];
    //   let parmars = {
    //     pid: val,
    //     pageNo: 1,
    //     pageSize: 1000,
    //   };
    //   await orgAPI
    //     .getOrgList(parmars)
    //     .then((res) => {
    //       res.data.map((item) => {
    //         this.data.push({
    //           pid: item.pid,
    //           id: item.id,
    //           label: item.orgname ? item.orgname : "label" + item.id,
    //           children: [],
    //         });
    //       });
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.message);
    //     });
    // },
    // handleNodeClick(data, node, nodeSelf) {
    //   // console.log(data);
    //   this.choseDepart = { ...data };
    //   this.datas.orgname = data.label;
    // },

    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
    },
    close() {
      this.cancel();
    },
    save() {
      this.$refs.editForm.validate((valid) => {
        // console.log(this.datas, "datas", this.choseDepart);

        if (valid) {
          this.loading = true;
          this.$emit("saveForm", {
            data: { pid: 0, ...this.datas },
            // choseDepart: this.choseDepart,
            choseDepart: { id: 0, label: "信息中心" },
          });
        } else {
          return false;
        }
      });
    },
    getRules() {
      return {
        name: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.name) {
                callback(new Error(`请填写考核点`));
                return;
              }
              if (this.datas.name.trim().length < 1) {
                callback(new Error(`请填写考核点`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        score: [
          {
            validator: (rule, value, callback) => {
              if (this.datas.score === 0) {
                callback();
              }
              if (!this.datas.score) {
                callback(new Error(`请填写总分（最小值为0，最大值为100）`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        weight: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.weight) {
                callback(new Error(`请填写权重（最小值为1）`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.ql-snow {
  min-height: 100px;
}
</style>